<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue'
import Plyr from 'plyr'
const props = withDefaults(
    defineProps<{
        videoSrc: string
    }>(),
    {
        videoSrc: 'http://150.158.107.119:8080/assets/video/girl.mp4'
    }
)
const playerRef = ref<HTMLVideoElement>()
let plyrInstance: Plyr | null = null
nextTick(() => {
    plyrInstance = new Plyr(playerRef.value as HTMLElement, {
        controls: [
            'play-large', // The large play button in the center
            'restart', // Restart playback
            'rewind', // Rewind by the seek time (default -10 seconds)
            'play', // Play/pause playback
            'fast-forward', // Fast forward by the seek time (default 10 seconds)
            'progress', // Progress bar and scrubber for playback and buffering
            'current-time', // Current time of playback
            'duration', // Duration of playback
            'mute', // Toggle mute
            'volume', // Volume control
            'captions', // Toggle captions
            'settings', // Settings menu
            'pip', // Picture-in-picture (currently Safari only)
            'airplay', // Airplay (currently Safari only)
            'fullscreen' // Fullscreen
        ],
        tooltips: {
            controls: true,
            seek: true
        },
        ratio: '16:9', // Aspect ratio of the video
        clickToPlay: true, // Whether to play on click/tap
        hideControls: false, // Hide controls when not interacting with the player
        settings: ['captions', 'quality', 'speed', 'loop'],
        loop: { active: false },
        quality: {
            default: 720,
            options: [480, 720, 1080, 1440, 2160, 2880, 3600, 4320]
        }
    })
    plyrInstance.on('play', (event) => {
        console.log('Video started playing')
    })

    plyrInstance.on('pause', (event) => {
        console.log('Video paused')
    })

    plyrInstance.on('ended', (event) => {
        console.log('Video ended')
    })
})
onBeforeUnmount(() => {
    if (plyrInstance) {
        plyrInstance.destroy()
    }
})
</script>

<template>
    <div class="plyr-player">
        <video ref="playerRef" playsinline controls>
            <source :src="props.videoSrc" type="video/mp4" />
        </video>
    </div>
</template>

<style scoped>
.plyr-player {
    max-width: 50rem;
    margin: 0 auto;
}
</style>
